<extend name="Public:base" />
<block name="Controller">Nav</block>
<block name="Main">
<style type="text/css">
.menuli{
  height: 80px;
  border:1px dashed #ddd;
  width: 80px;
  margin-right: 8px;
  padding: 6px;
}  
.reMenu{
  cursor: pointer;
  position:relative;
  width: 8px;
  left: -12px;
  top: -18px;
  clear: both;
  float: left;
  text-align: center;
}
.unSelect{
  cursor: pointer;
}
</style>
    <div class="col-md-10 main padding">
    <div class="cf">
    <div class="fl"><h2>导航设计</h2></div>
    <div class="fr"><a class="btn btn-primary" href="{:U('Admin/Nav/index')}">新增导航</a></div>
      
    </div>
    <hr />
      <div class="panel panel-primary margin">
          <div class="panel-hd">首页</div>
          <div class="panel-bd">                    
             <div class="cf">
              <div ms-repeat="show_index" ms-if-loop="el.show_index == 1"  class=" menuli fl" >
                  <div ms-click="delItem(el,'show_index')" class="reMenu clearfix"><span class="icon-times text-danger"></span></div>
                  {{el.name}}
              </div>
             </div>
          </div>
          <footer class="panel-footer">
              <button ms-click="openNavsModal('show_index')" class="btn btn-success btn-xs"><i class="icon-download"></i>
              安装</button>
          </footer>
      </div>   


      <div class="panel panel-primary margin">
          <div class="panel-hd">侧边栏</div>
          <div class="panel-bd">                    
             <div class="cf">
              <div ms-repeat="navs" ms-if-loop="el.pos =='aside' "  class=" menuli fl" >
                  <div ms-click="delItem(el)" class="reMenu clearfix"><span class="icon-times text-danger"></span></div>
                  {{el.name}}
              </div>
             </div>
          </div>
          <footer class="panel-footer">
              <button  ms-click="openNavsModal('aside')" class="btn btn-success btn-xs"><i class="icon-download"></i>
              安装</button>
          </footer>
      </div>


      <div class="panel panel-primary margin">
          <div class="panel-hd">菜单</div>
          <div class="panel-bd">                    
             <div class="cf">
              <div ms-repeat="navs" ms-if-loop="el.pos =='menu' "  class=" menuli fl" >
                  <div ms-click="delItem(el)" class="reMenu clearfix"><span class="icon-times text-danger"></span></div>
                  {{el.name}}
              </div>
             </div>
          </div>
          <footer class="panel-footer">
              <button ms-click="openNavsModal('menu')" class="btn btn-success btn-xs"><i class="icon-download"></i>
              安装</button>
          </footer>
      </div>

      <div class="panel panel-primary margin">
          <div class="panel-hd">底部导航</div>
          <div class="panel-bd">                    
             <div class="cf">
              <div ms-repeat="navs" ms-if-loop="el.pos =='bottom' "  class=" menuli fl" >
                  <div ms-click="delItem(el)" class="reMenu clearfix"><span class="icon-times text-danger"></span></div>
                  {{el.name}}
              </div>
             </div>
          </div>
          <footer class="panel-footer">
              <button ms-click="openNavsModal('bottom')" class="btn btn-success btn-xs"><i class="icon-download"></i>
              安装</button>
          </footer>
      </div> 

    </div>
<div data-modal class="popup" id="navs-modal">
  <div class="popup-inner">
    <div class="popup-hd">
      <h4 class="popup-title">请选择</h4>
      <span data-modal-close
            class="close">&times;</span>
    </div>
    <div class="popup-bd">
      <div ms-visible="pos !='show_index' " class="cf ">
        <div ms-repeat="navs" ms-if-loop="el.pos =='' " ms-click="selectItem(el)" class=" menuli fl unSelect" >
            {{el.name}}
        </div>
       </div>

       <div ms-visible="pos =='show_index' " class="cf ">
        <div ms-repeat="show_index" ms-if-loop="el.show_index =='0' " ms-click="selectItem(el)" class=" menuli fl unSelect" >
            {{el.name}}
        </div>
       </div>
    </div>
  </div>
</div>

<load href="Public/easyapps/js/EasyApps.js" />
<script type="text/javascript">

require("nprogress/nprogress,jquery,app", function(nprogress,$,app) {
    

    $('.form-validate').each(function() {
        var $obj = $(this);
        $obj.validate(app.validateOpt());
    });

    var Nav = avalon.define('Nav', function(vm) {
        vm.navs = eval('({$navs})');
        vm.show_index = eval('({$navs})');
        vm.pos = '';

        vm.openNavsModal = function(pos){
          vm.pos = pos;
          app.showModel("#navs-modal");
        }
        vm.selectItem = function(el){
          if (vm.pos == 'show_index') {
            el.show_index = 1;
          }else{
            el.pos = vm.pos;
          }
          app.hideModal("#navs-modal");
        }
        vm.delItem = function(el,pos){
          if (pos == 'show_index') {
            el.show_index = '0';
          }else{
            el.pos = '';
          }
        }


    })
    avalon.scan()
}) 

</script>    
</block>